<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>     
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<jsp:include page="/WEB-INF/template/cabecalho.jsp"/>

<script>


$(function() {
	$('#mnuCadPontos').addClass('ativo');

	$('#map_canvas').gmap({center:"-22.368, -43.443"}).bind('init', function(event, map) { 
		mapPontosEntregas = map;
		
		$(map).click( function(event) {

			$('#map_canvas').gmap('addMarker', {'position': event.latLng, 'draggable': true, 'bounds': false}, function(map, marker) {

				$('#dialog').append('<form id="dialog'+marker.__gm_id+'" method="post" action="/pontos" style="display:none;">' + 									
									'<input type="hidden" name="_method" id="_method' + marker.__gm_id + '" value="" />' +
									'<input type="hidden" name="ponto.id" id="id' + marker.__gm_id + '" value="' + (marker.get("id")?marker.get("id"):"") + '" />'  +
									'<input type="hidden" name="ponto.x" id="x' + marker.__gm_id + '" />'  +
									'<input type="hidden" name="ponto.y" id="y' + marker.__gm_id + '" />'  +
									'<fieldset>' +		
									'<p><label for="ponto.razaosocial">Raz&atilde;o Social:</label><input  type="text" id="razaosocial'+marker.__gm_id+'" class="txt" name="ponto.razaosocial" value=""/></p>' +
									'<p><label for="ponto.estado">Estado:</label><input  type="text" id="state'+marker.__gm_id+'" class="txt" name="ponto.estado" value="" readonly="yes"/></p>' +
									'<p><label for="ponto.endereco">Logradouro</label><input  type="text" id="address'+marker.__gm_id+'" class="txt" name="ponto.endereco" value=""/>' +
									'<div id="resultsEndereco' + marker.__gm_id + '" class="resultsEndereco">' +
										'<div class="direita"><span class="fechar">&nbsp;</span></div>' +
										'<div id="listaResults' + marker.__gm_id + '"></div>'+
									'</div>' +
									'</p><div class="fRight"><input type="button" id="butAddr'+marker.__gm_id+'" name="butAddr'+marker.__gm_id+'" value="Buscar"/>' +
									'</div>' +
									'<p><label for="ponto.tipo">Tipo:</label><select id="tipoTarefa'+marker.__gm_id+'" name="ponto.tipo"><option value="1">Entrega</option><option value="0">Depot</option></select></p>' +
									'<p id="linDemand'+marker.__gm_id+'"><label for="Demand">Demanda (kg)</label><input type="text" id="Demand'+marker.__gm_id+'" class="txt" name="ponto.demand" value=""/></p>' +
									'<p id="linPrioridade'+marker.__gm_id+'"><label for="ponto.prioridade">Prioridade</label>' +
										'<select id="prioridade'+marker.__gm_id+'" name="ponto.prioridade">' +
										'<option value="1">M&aacute;xima</option>' +
										'<option value="2">Importante</option>' +
										'<option value="3">M&eacute;dia</option>' +
										'<option value="4">Baixa</option>' +
										'<option value="5" selected>M&iacute;nima</option>' +										
										'</select></p>' + 
									'<p><label for="ponto.comment">Coment&aacute;rios</label><textarea id="comment'+marker.__gm_id+'" class="txt" name="ponto.comment" cols="60" rows="5"></textarea></p>' +
									'</fieldset>' +
									'</form>');
				$('#butAddr'+marker.__gm_id).button().click(function () { findAddress($('#address' + marker.__gm_id).val(), marker) });
				$('span.fechar').click(function () {$(this.parentNode.parentNode).hide();});
				findLocation(marker.getPosition(), marker);
				
				var select = $( "#prioridade" + marker.__gm_id);
				var slider = $( "<div id='slider'"+ marker.__gm_id+"></div>" ).insertAfter( select ).slider({
					min: 1,
					max: 5,
					range: "min",
					value: 5 - select[ 0 ].selectedIndex,
					slide: function( event, ui ) {
						select[ 0 ].selectedIndex = 5 - (ui.value);
					}
				});
				select.change(function() {
					slider.slider( "value", 5 - this.selectedIndex);
				});
				
				$("#tipoTarefa"+marker.__gm_id).change(function(){ 
					if(this.selectedIndex == 1) {
						$('#Demand'+marker.__gm_id).val("");
						$('#linDemand'+marker.__gm_id).hide();
						$('#linPrioridade'+marker.__gm_id).hide();
					}
					else {
						$('#linDemand'+marker.__gm_id).show();
						$('#linPrioridade'+marker.__gm_id).show();
					}
				});

			}).dragend( function(event) {

				var self = this;

				findLocation(event.latLng, this);

			}).click( function() {

				openDialog(this);

			})

		});				

	});

	

	function findLocation(location, marker) {

		$('#map_canvas').gmap('search', {'location': location}, function(results, status) {

			var estado = ""; 
			if ( status === 'OK' ) {

				$.each(results[0].address_components, function(i,v) {

					if ( v.types[0] == "administrative_area_level_1" || v.types[0] == "administrative_area_level_2" ) {

						$('#state'+marker.__gm_id).val(v.long_name);
						estado = v.long_name;

					} /*else if ( v.types[0] == "country") {

						$('#country'+marker.__gm_id).val(v.long_name);

					}*/

				});

				marker.setTitle(results[0].formatted_address);

				$('#address'+marker.__gm_id).val(results[0].formatted_address);

				openDialog(marker);

				
				if(estado !="Rio de Janeiro" && estado!="Espírito Santo") alert("O Estado escolhido não está disponível para roteirização nesta versão.");
			}
			else {
				if(status == "ZERO_RESULTS") marker.setMap(null); 
				else alert("Erro Geocode: " + status);
				
			}

		});

	}

	//Mudando para procurar pelo endereco - popular para uma div flutuante...
	function findAddress(address, marker) {
		
		$('#map_canvas').gmap('search', {'address': address}, function(results, status) {

			
			
			if ( status === 'OK' ) {

				resultsGeoCode = results;
				var montaDiv = "<ul>";
				for(var ixi=0; ixi<results.length;ixi++) {								
					montaDiv += "<li onclick='centralizaMarker(" + marker.__gm_id + "," + ixi + ");'>" + results[ixi].formatted_address + "</li>";
				
				}
				montaDiv += "</ul>";
				
				$('#listaResults' + marker.__gm_id ).empty().append(montaDiv);
				$('#resultsEndereco' + marker.__gm_id).show();

			}
			 else {
					alert("Erro Geocode: " + status);
				  }

		});

	}


	function openDialog(el) {	
		$('#dialog'+el.__gm_id).dialog({'modal':true, 'minWidth': 500, 'title': 'Pontos de Entrega', 
			'buttons': { 
				"Remover": function() {
	
					if(el.get('id')) {
						//$('#_method' + el.__gm_id).val("DELETE");
						 $.ajax({ //TODO: 
							   url: '<c:url value="/pontos/"/>' + el.get('id') 
							   , type: "POST" 
							   //, contentType: "text/xml" 
							   //, data: $("#dialog" + el.__gm_id).serialize()
							   , data: {"_method":"DELETE"}
							   , success: trataResposta 
							}); 
						
					}
					$('#_method' + el.__gm_id).val("");
					removeMarkerDoArray(el, arrMarkers);
															
					
					function trataResposta(obj) {
						//$("#infoResposta" ).val(obj);
						//alert(obj);
						if(obj == "OK") alert('Salvo com sucesso');					
						else alert("Erro ao salvar");
						insereMarkerNoArray(el, arrMarkers);
					}
					
					
					$(this).dialog( "close" );
					$(this).remove();
					el.setMap(null);
	
					return false;
	
				},
				"Cancelar": function () {
					$(this).dialog( "close" );
				},
	
				"Salvar": function() {
	
					$('#x' + el.__gm_id).val(el.getPosition().lng());
					$('#y' + el.__gm_id).val(el.getPosition().lat());
					
					if($('#tipoTarefa'+el.__gm_id).val() == 0) {												
						//marker.setIcon("<c:url value="/img/number_"/>"+$('#map_canvas').gmap('get','markers',[]).length+".png");
						if(numeraMarkers.depot == 3) {
							alert("Neste piloto só é permitido no máximo 3 Depots");
						//	return false;
						}
						else {
							el.setIcon("<c:url value="/img/number_"/>" + (numeraMarkers.depot++) +".png");							
						}
						//insereMarkerNoArray(el, arrMarkersDepot);
					}
					else {
						el.setIcon("<c:url value="/img/vumber_"/>" + (numeraMarkers.job++) +".png");
						
					
					//arrMarkers.push(el);
					}
				
					
					if(el.get('id')) {
						$('#_method' + el.__gm_id).val("PUT");
						 $.ajax({ //TODO: 
							   url: '<c:url value="/pontos/"/>' + el.get('id') 
							   , type: "POST" 
							   //, contentType: "text/xml" 
							   , data: $("#dialog" + el.__gm_id).serialize()
							 //  , dataType: "json"
							   , success: trataResposta 
							}); 
						
					}
					else {
						$('#_method' + el.__gm_id).val("POST");
						 $.ajax({ //TODO: 
							   url: '<c:url value="/pontos/novo"/>' 
							   , type: "POST" 
							   //, contentType: "text/xml" 
							   , data: $("#dialog" + el.__gm_id).serialize()
							//   , dataType: "json"
							   , success: trataResposta 
							}); 
					}
					
					$('#_method' + el.__gm_id).val("");
						
					function trataResposta(obj) {
						//$("#infoResposta" ).val(obj);
						//alert(obj);
						if(obj == "OK") alert('Salvo com sucesso');
						else if(isNumber(json.resposta)) el.set("id", json.resposta);
						else alert("Erro ao salvar");
						insereMarkerNoArray(el, arrMarkers);
					}
					
					$(this).dialog( "close" );
					return false;
	
				}

			}});

	}
	
	
	//Para popular os markers
	
	$.ajax({ //TODO: 
		   url: '<c:url value="/pontos/todos.json"/>' 
		   , type: "GET" 
		   //, contentType: "text/xml" 		  
		   , success: popula 		   		 
		}); 
	
	 function popula(json) {
			$('#listaPontos').empty();
		   $.each(json.list, function(i,v) {
			   var myLatlng = new google.maps.LatLng(v.y,v.x); 
		   
			   $('#map_canvas').gmap('addMarker', {'position': myLatlng, 'draggable': true, 'bounds': false}, function(map, marker) {
					marker.set("id", v.id);
					$('#dialog').append('<form id="dialog'+marker.__gm_id+'" method="post" action="/pontos" style="display:none;">' + 									
										'<input type="hidden" name="_method" id="_method' + marker.__gm_id + '" value="" />' +
										'<input type="hidden" name="ponto.id" id="id' + marker.__gm_id + '" value="' + (marker.get("id")?marker.get("id"):"") + '" />'  +
										'<input type="hidden" name="ponto.x" id="x' + marker.__gm_id + '" value="' + v.x + '"/>'  +
										'<input type="hidden" name="ponto.y" id="y' + marker.__gm_id + '" value="' + v.y + '"/>'  +
										'<fieldset>' +		
										'<p><label for="ponto.razaosocial">Raz&atilde;o Social:</label><input  type="text" id="razaosocial'+marker.__gm_id+'" class="txt" name="ponto.razaosocial" value="' + v.razaosocial + '"/></p>' +
										'<p><label for="ponto.estado">Estado:</label><input  type="text" id="state'+marker.__gm_id+'" class="txt" name="ponto.estado" value="' + v.estado + '" readonly="yes"/></p>' +
										'<p><label for="ponto.endereco">Logradouro</label><input  type="text" id="address'+marker.__gm_id+'" class="txt" name="ponto.endereco" value="' + v.endereco + '"/>' +
										'<div id="resultsEndereco' + marker.__gm_id + '" class="resultsEndereco">' +
											'<div class="direita"><span class="fechar">&nbsp;</span></div>' +
											'<div id="listaResults' + marker.__gm_id + '"></div>'+
										'</div>' +
										'</p><div class="fRight"><input type="button" id="butAddr'+marker.__gm_id+'" name="butAddr'+marker.__gm_id+'" value="Buscar"/>' +
										'</div>' +
										'<p><label for="ponto.tipo">Tipo:</label><select id="tipoTarefa'+marker.__gm_id+'" name="ponto.tipo"><option value="1">Entrega</option><option value="0">Depot</option></select></p>' +
										'<p id="linDemand'+marker.__gm_id+'"><label for="Demand">Demanda (kg)</label><input type="text" id="Demand'+marker.__gm_id+'" class="txt" name="ponto.demand" value="' + v.demand + '"/></p>' +
										'<p id="linPrioridade'+marker.__gm_id+'"><label for="ponto.prioridade">Prioridade</label>' +
											'<select id="prioridade'+marker.__gm_id+'" name="ponto.prioridade">' +
											'<option value="1">M&aacute;xima</option>' +
											'<option value="2">Importante</option>' +
											'<option value="3">M&eacute;dia</option>' +
											'<option value="4">Baixa</option>' +
											'<option value="5" selected>M&iacute;nima</option>' +										
											'</select></p>' + 
										'<p><label for="ponto.comment">Coment&aacute;rios</label><textarea id="comment'+marker.__gm_id+'" class="txt" name="ponto.comment" cols="60" rows="5">' + v.comment + '</textarea></p>' +
										'</fieldset>' +
										'</form>');
					
					$('#butAddr'+marker.__gm_id).button().click(function () { findAddress($('#address' + marker.__gm_id).val(), marker) });
					$('span.fechar').click(function () {$(this.parentNode.parentNode).hide();});
											
					var select = $( "#prioridade" + marker.__gm_id);
					var slider = $( "<div id='slider'"+ marker.__gm_id+"></div>" ).insertAfter( select ).slider({
						min: 1,
						max: 5,
						range: "min",
						value: 5 - select[ 0 ].selectedIndex,
						slide: function( event, ui ) {
							select[ 0 ].selectedIndex = 5 - (ui.value);
						}
					});
					select.change(function() {
						slider.slider( "value", 5 - this.selectedIndex);
					});
					
					
					
					$("#tipoTarefa"+marker.__gm_id).change(function(){ 
						if(this.selectedIndex == 1) {
							$('#Demand'+marker.__gm_id).val("");
							$('#linDemand'+marker.__gm_id).hide();
							$('#linPrioridade'+marker.__gm_id).hide();
						}
						else {
							$('#linDemand'+marker.__gm_id).show();
							$('#linPrioridade'+marker.__gm_id).show();
			   			}
					});
					
					
					select.val(v.prioridade);
					slider.slider( "value", 5 - v.prioridade);
					$('#tipoTarefa' + marker.__gm_id).val(v.tipo);
				
					if(v.tipo == 0) {
						$('#Demand'+marker.__gm_id).val("");
						$('#linDemand'+marker.__gm_id).hide();
						$('#linPrioridade'+marker.__gm_id).hide();
					}
					else {
						$('#linDemand'+marker.__gm_id).show();
						$('#linPrioridade'+marker.__gm_id).show();
		   			}
				
									
					
					if($('#tipoTarefa'+marker.__gm_id).val() == 0) {												
						//marker.setIcon("<c:url value="/img/number_"/>"+$('#map_canvas').gmap('get','markers',[]).length+".png");
						$('#listaPontos').append('<li>' +'<img src="<c:url value="/img/number_"/>' + (numeraMarkers.depot) +".png" + '"> ' +
														'Nome: ' + v.razaosocial + ' Endereço:' + $('#address'+marker.__gm_id).val() + '</li>');
						marker.setIcon("<c:url value="/img/number_"/>" + (numeraMarkers.depot++) +".png");							
						
						//insereMarkerNoArray(el, arrMarkersDepot);
					}
					else {
						$('#listaPontos').append('<li>' + '<img src="<c:url value="/img/vumber_"/>' + (numeraMarkers.job) +".png" + '">' +
													'Nome: ' + v.razaosocial + ' Endereço:' + $('#address'+marker.__gm_id).val() + '</li>');
						marker.setIcon("<c:url value="/img/vumber_"/>" + (numeraMarkers.job++) +".png");
						
					
					//arrMarkers.push(el);
					}
					
					
					
					insereMarkerNoArray(marker, arrMarkers);
					
			   }).dragend( function(event) {

					var self = this;

					findLocation(event.latLng, this);

				}).click( function() {

					openDialog(this);

				});
			   
			   
		   });
	   }
	
});
</script>
<div id="dialog"></div>

		<table>
				<tr>
					<c:if test="${routeSession.route.id != null}">
						ID de Roteirização número ${routeSession.route.id} acompanhando com sucesso.
						
						<br>
						<input type="hidden" name="ponto.route.id" value="${routeSession.route.id}" />
					</c:if>
	
				</tr>
		</table>

<form id="pontosForm" action="<c:url value="/pontos"/>" method="POST">	
	<div class="pontos">
		<div id="map_canvas"></div>	
		<div id="listaPontos" class="listapontos"></div>
	</div>
</form>

<jsp:include page="/WEB-INF/template/rodape.jsp"/>